<template>
  <div class="flow">

    <div class="flow_header">
        <div class="flow_header_left">我的流程</div>
        <div class="flow_header_center">
            <div @click="f1" class="title" :class="state == 1?'foucs':''">
                <span>待处理</span>
                <span class="tip" v-if="todo_handle!=0">{{todo_handle}}</span>
            </div>
            <div @click="f2" class="title" :class="state == 0?'foucs':''">
                <span>我发起的</span>
                <span class="tip" v-if="my_start!=0">{{my_start}}</span>
            </div>
            <div @click="f3" class="title" :class="state == 2?'foucs':''">
                <span>已完成</span>
            </div>
        </div>
        <div class="flow_header_right"><a-icon type="close" class="icon" @click="$router.go(-1)" title="关闭"/></div>
    </div>

    <div class="flow_contain" v-if="task_list" v-infinite-scroll="load" :infinite-scroll-delay="500" :infinite-scroll-disabled="disabled">
        <div class="content_box" v-for="item in task_list" :key="item.id" @click.stop="open_detail(item)">
            <div class="content_box_top">
                <div :style="color">{{task_state}}</div>
                <div>{{time_sub(item.createTime)}}</div>
            </div>
            <div style="margin-left:15px" v-if="item.app">app：{{item.app.title}}</div>
            <div style="margin-left:15px" v-else>app</div>
            <div class="content_box_bottom">
                <div v-if="item.automation">工作流：{{item.automation.name}}</div>
                <div v-else>工作流</div>
                <div>发起人 <span class="start_user"><a-icon type="user" style="color: white"/></span> {{item.startBy.username}}</div>
                <div>{{item.createTime}}</div>
            </div>
        </div>
    </div>
    <div v-else style="padding-top: 200px">
        <el-empty description="暂无流程"></el-empty>
    </div>

    <notice-work-modal v-if="noticeWorkVisible"
        :visible="noticeWorkVisible"
        :taskId="taskId"
        :noticeRoute="noticeRoute"
        :state="state"
        @cancel="noticeWorkVisible = false"
        @success_back="success_back"
    ></notice-work-modal>
  </div>
</template>

<script>
import {getTaskCount, getTaskTodolist} from '@/api/app'
import NoticeWorkModal from '../modal/notice/noticeWorkModal.vue';

export default {
    components: {
        NoticeWorkModal,
    },
    data() {
        return {
            state: 1,
            disabled: false,
            todo_handle: 0,
            my_start: 0,
            task_list: [],
            task_state: '审批',
            // my_task_list: [],
            // wait_task_list: [],
            // finall_task_list: [],
            color: '',
            noticeWorkVisible: false,
            noticeRoute: 'workflowApprove',
            taskId: '',
        }
    },
    methods: {
        async f1() {
            this.task_list = await getTaskTodolist(1)
            // this.task_list = this.wait_task_list
            this.task_state = '审批'
            this.color = 'color:purple;font-weight:700'
            this.state = 1
        },
        async f2() {
            this.task_list = await getTaskTodolist(0)
            // this.task_list = this.my_task_list
            this.task_state = '处理中...'
            this.color = 'color:#E6A23C;font-weight:700'
            this.state = 0
        },
        async f3() {
            this.task_list = await getTaskTodolist(2)
            // this.task_list = this.finall_task_list
            this.task_state = '已通过'
            this.color = 'color:#67C23A;font-weight:700'
            this.state = 2
        },
        load() {
            console.log("加载")
        },
        open_detail(item) {
            this.taskId = item.id
            this.noticeWorkVisible = true
        },
        async success_back() {
            let data = await getTaskCount()
            this.my_start = data[0]
            this.todo_handle = data[1]
            this.task_list = await getTaskTodolist(this.state)
        }
    },
    computed: {
        time_sub() {
            return (star_time) => {
                let startDate = star_time.replace(new RegExp("-","gm"),"/");
                let startime = (new Date(startDate)).getTime()
                let endtime = new Date().getTime()
                let time_s = parseInt((endtime - startime) / 1000)
                if(time_s <= 59){
                    return time_s + '秒前'
                }
                let time_min = parseInt((endtime - startime) / 1000 / 60)
                if(time_min <= 59){
                    return time_min + '分钟前'
                }
                let time_h = parseInt((endtime - startime) / 1000 / 60 / 60)
                if(time_h <= 23){
                    return time_h + '小时前'
                }
                let time_day = parseInt((endtime - startime) / 1000 / 60 / 60 / 24)
                if(time_day <= 29){
                    return time_day + '天前'
                }
                let time_month = parseInt((endtime - startime) / 1000 / 60 / 60 / 24 / 30)
                if(time_month <= 11){
                    return time_month + '月前'
                }
                let time_year = parseInt((endtime - startime) / 1000 / 60 / 60 / 24 / 30 / 12)
                if(time_year >= 1){
                    return time_year + '年前'
                }
            }
        },
    },
    async mounted() {
        let data = await getTaskCount()
        this.my_start = data[0]
        this.todo_handle = data[1]
        this.color = 'color:purple;font-weight:700'
        this.task_list = await getTaskTodolist(1)
        // this.wait_task_list = await getTaskTodolist(1)
        // this.task_list = this.wait_task_list
        // this.my_task_list = await getTaskTodolist(0)
        // this.finall_task_list = await getTaskTodolist(2)
    },
}
</script>

<style lang="less" scoped>
    .flow{
        overflow: scroll;
        width: 100%;
        height: 100%;
        background-color: #f5f5f9;

        .flow_header{
            position: fixed;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 50px;
            background-color: white;
            box-shadow: 0 2px 6px 0 rgb(0 0 0 / 15%);
            z-index: 999;

            .flow_header_left{
                width: 100px;
                color: black;
                font-size: 17px;
                font-weight: 700;
                margin-left: 20px;
                padding-top: 13px;
            }

            .flow_header_center{
                display: flex;
                justify-content: flex-start;
                margin-top: 13px;
                width: 390px;

                .title{
                    flex: 1;
                    height: 38px;
                    width: 150px;
                    color: black;
                    font-size: 15px;
                    text-align: center;
                    cursor: pointer;

                    .tip{
                        margin-left: 5px;
                        padding: 2.5px;
                        padding-left: 6px;
                        padding-right: 6px;
                        font-size: 10px;
                        border-radius: 30px;
                        background-color: red;
                        color: white;
                    }
                }
                .title:hover{
                    border-bottom: 4px solid skyblue
                }
                .foucs{
                    border-bottom: 4px solid skyblue
                }
            }

            .flow_header_right{
                width: 100px;
                color: black;
                margin-top: 13px;

                .icon{
                    color: gray;
                    font-size: 18px;
                    cursor: pointer;
                }
            }
        }

        .flow_contain{
            width: 100%;
            padding-top: 90px;

            .content_box{
                width: 65%;
                height: 130px;
                margin: auto;
                margin-bottom: 15px;
                background-color: white;
                color: rgb(92, 92, 92);
                cursor: pointer;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
            }
            .content_box:hover{
                box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.1)
            }

            .content_box_top{
                display: flex;
                justify-content: space-between;

                div{
                    margin: 20px;
                    margin-top: 15px;
                }
            }

            .content_box_bottom{
                display: flex;
                justify-content: space-between;

                div{
                    flex: 1;
                    margin: 15px;
                    // margin-right: 50px;
                }

                .start_user{
                    padding: 5px;
                    padding-left: 7px;
                    padding-right: 7px;
                    border-radius: 30px;
                    background-color: skyblue;
                }
            }
        }
    }
</style>